<template>
  <div class="swiper-wrap">
    <swiper
      :slidesPerView="1"
      :spaceBetween="14"
      :breakpoints="{
        '@0.00': {
          slidesPerView: 1,
          spaceBetween: 14,
        },
        '@0.75': {
          slidesPerView: 2,
          spaceBetween: 14,
        },
        '@1.00': {
          slidesPerView: 3,
          spaceBetween: 14,
        },
        '@1.50': {
          slidesPerView: 4,
          spaceBetween: 14,
        },
      }"
      class="my-swiper"
    >
      <swiper-slide class="swiper-slide" v-for="(item, index) in fragments" :key="index">
        <div class="swiper-slide__content">
          <img :src="item.img" alt="" srcset="">
          <p class="title">{{item.title}}</p>
          <p class="subtitle">
            {{ item.title !== item.subtitle ? item.subtitle : ''}}
          </p>

          <a :href="item.link" target="_blank" class="next-button" rel="noopener noreferrer">去看看</a>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import {getFragmentsData} from '@/api/fragments'
import 'swiper/css';

const fragments = getFragmentsData()
</script>

<style lang="scss" scoped>
.swiper-wrap {
  $card-width: 200px;
  $card-height: 280px;
  $card-radius: 16px;
  overflow: hidden;
  padding: 0 7px;
  box-sizing: border-box;
  .my-swiper {
    .swiper-slide {
      border-radius: $card-radius;
      width: $card-width !important;
      height: $card-height;
      .swiper-slide__content {
        width: inherit;
        height: inherit;
        border-radius: $card-radius;
        background-color: var(--item_bg_color);
        backdrop-filter: blur(var(--card_filter));
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #323232;
        justify-content: center;
        padding: 16px;
        box-sizing: border-box;

        img {
          width: 90px;
          height: 90px;
        }

        .subtitle {
          font-size: 12px;
          line-height: 20px;
          height: 20px;
          margin-top: 16px;
          color: var(--item_left_text_color);
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          display: -webkit-box;
        }

        .title {
          font-weight: normal;
          font-size: 16px;
          margin: 0px;
          font-weight: 600;
          color: var(--item_left_title_color);
        }

        .next-button {
          margin-top: 20px;
          padding: 4px 8px;
          box-sizing: border-box;
          font-size: 12px;
          line-height: 20px;
          border-radius: 20px;
          cursor: pointer;
          border: 1px solid var(--item_left_title_color);
          color: var(--item_left_title_color);
        }
      }
    }
  }
}
</style>
